<template>
  <div>
    <div class="box">
      <p>{{list}}</p>
      <div class="two" v-for="(v,i) in arr" :key="i">
        <img :src="v.img1" alt>
        <img :src="v.img2" alt>
      </div>
      <span>{{list2}}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: "音乐专区",
      list2:"展开更多专区",
      arr: [
       
        { img1: "/bb/b4.png",img2: "/bb/b2.png", },
        { img1: "/bb/b1.png",img2: "/bb/b4.png" },
        { img1: "/bb/b3.png",img2: "/bb/b5.png" },
      ]
    };
  }
};
</script>

<style scoped>
.box {
  margin-top: 0.05rem;
}
img {
  width: 3.34rem;
  height: 1.26rem;
}
.two {
  display: flex;
  justify-content: space-between;
  margin-left: 0.3rem;
  margin-right: 0.3rem;
  margin-top: 0.26rem;
}
p {
  margin-left: 0.3rem;
  font-size: 0.3rem;
  font-weight: 700;
}
span {
  text-align: center;
  display: block;
  text-align: center;
  font-size: 0.3rem;
  color: gray;
  margin-top: 0.26rem;
}
</style>
